{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Modern Business - Start Bootstrap Template{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}
{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/business/business-modern.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}

    <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('{{ asset('bundles/applicationbootstrap/images/1900x1080_slide_one.png') }}');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('{{ asset('bundles/applicationbootstrap/images/1900x1080_slide_two.png') }}');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('{{ asset('bundles/applicationbootstrap/images/1900x1080_slide_three.png') }}');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>

    <div class="container">

        <!-- Marketing Icons Section -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Welcome to Modern Business
                </h1>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.2.0</h4>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
                        <a href="#" class="btn btn-default">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><i class="fa fa-fw fa-gift"></i> Free &amp; Open Source</h4>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
                        <a href="#" class="btn btn-default">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
                    </div>
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
                        <a href="#" class="btn btn-default">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!-- Portfolio Section -->
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Portfolio Heading</h2>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="{{ path('_portfolio_portfolio-item') }}">
                    <img class="img-responsive img-portfolio img-hover" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
                </a>
            </div>
        </div>
        <!-- /.row -->

        <!-- Features Section -->
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Modern Business Features</h2>
            </div>
            <div class="col-md-6">
                <p>The Modern Business template by Start Bootstrap includes:</p>
                <ul>
                    <li><strong>Bootstrap v3.2.0</strong>
                    </li>
                    <li>jQuery v1.11.0</li>
                    <li>Font Awesome v4.1.0</li>
                    <li>Working PHP contact form with validation</li>
                    <li>Unstyled page elements for easy customization</li>
                    <li>17 HTML pages</li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p>
            </div>
            <div class="col-md-6">
                <img class="img-responsive" src="{{ asset('bundles/applicationbootstrap/images/700x450.png') }}" alt="">
            </div>
        </div>
        <!-- /.row -->

        <hr/>

        <!-- Call to Action Section -->
        <div class="well">
            <div class="row">
                <div class="col-md-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
                </div>
                <div class="col-md-4">
                    <a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
                </div>
            </div>
        </div>

        <hr/>

    </div> <!-- /container -->
{% endblock %}

{% block footer %}
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </div>
    </footer>
{% endblock %}